<template>
	<view class="qiun-columns">
		<xweek v-on:back="changeBack"></xweek>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt line-body">
			<view class="qiun-title-dot-light">周体重变化曲线</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="weightLine" id="weightLine" class="charts" @touchstart="touchLineA"></canvas>
		</view>
		<view class='margin-xs bg-white padding-xl radius shadow-lg'>
			<view class='text-center margin-bottom text-lg  text-grey'>体脂率计算</view>
			<view class='text-content'>
				<view class="text-center">您的体脂率为:<text class="text-bold text-red">{{TZL}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import xweek from '../../components/junkj-xweek/xweek.vue';
	var _self;
	var canvaLineA = null;
	export default {
		components: {
			xweek
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				week: {
					start: '',
					end: ''
				},
				TZL: 0
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getTZLState()
		},
		methods: {
			getWeekWeight() {
				this.$api.getWeekWeight(this.week).then(res => {
					if (res.code) {
						this.getServerData(res.data.map(i => Number(i.signWeight) || 0))
					}
				})
			},
			getServerData(data = [0, 0, 0, 0, 0, 0, 0]) {
				let LineA = {
					categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
					series: [{
						name: '体重',
						data: data
					}]
				};
				_self.showLineA("weightLine", LineA);
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 0,
						max: 150,
						format: (val) => {
							return val.toFixed(0) + 'KG'
						}
					},
					width: _self.cWidth,
					height: _self.cHeight,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data + "KG"
					}
				});
			},
			changeBack: function(d) {
				this.week = d
				this.getWeekWeight()
			},
			getTZLState() {
				let TZL = this.$info.bodyFat({
					weight: this.userInfo.userWeight,
					height: this.userInfo.userHeight,
					sex: this.$comm.isgender(this.userInfo.userSex),
					age: this.$comm.getAge(this.userInfo.userBirthday)
				})
				this.TZL = TZL
			}
		}
	}
</script>

<style lang="scss">
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.qiun-title-dot-light {
		// padding-left: 20rpx;
		text-align: center;
	}

	.line-body {
		margin-top: 20upx;

		.qiun-title-dot-light {
			line-height: 60upx;
		}
	}
</style>
